<template>
	<view class="header" :style="{ paddingTop:paddingTop + 'px' }">
		<div class="title">
			{{title}}
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	const paddingTop = ref(0)
	// 接受自定义属性
	defineProps(['title'])
	// 获取安全区高度
	uni.getSystemInfo().then(info => {
		paddingTop.value = info.safeArea.top
	})
</script>

<style lang="scss" scoped>
	.header {
		.title {
			height: 70rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			padding-left: 20rpx;
		}
	}
</style>